<script setup lang="ts">
import {onBeforeMount, ref} from "vue";
import {createFromIconfontCN} from "@ant-design/icons-vue";
import {commonConsoleLog, ECode, iconFontAddress} from "@/util/commonUtil";
import {setCookie} from "@/util/cookieUtil";
import {message} from "ant-design-vue";
import {recorderBehavior} from "@/api/system/system";
import {getOutsideHotSearch} from "@/api/system/search";
import HotSectionItem from "@/components/hotSearchItem/index.vue"

const keywords = ref<string>('')
// 引入阿里图标库
const IconFont = createFromIconfontCN({
  scriptUrl: iconFontAddress,
});
const searchRadio = ref<number>(0)
const dialogVisible = ref<boolean>(false)
const selectIcon = ref<any>({
  name: "百度",
  icon: "baidu",
  url: "https://www.baidu.com/s?&wd=",
})
const iconList = ref<any>([
  {
    name: "百度",
    icon: "baidu",
    url: "https://www.baidu.com/s?&wd=",
  },
  {
    name: "Google",
    icon: "google",
    url: "https://www.google.com/search?q=",
  },
  {
    name: "Github",
    icon: "github",
    url: "https://github.com/search?q=",
  },
  {
    name: "Stackoverflow",
    icon: "stackoverflow",
    url: "https://stackoverflow.com/nocaptcha?s=",
  },
  {
    name: "码云",
    icon: "gitee",
    url: "https://search.gitee.com/?skin=rec&type=repository&q=",
  },
  {
    name: "哔哩哔哩",
    icon: "bilibili",
    url: "https://search.bilibili.com/all?keyword=",
  },
  {
    name: "知乎",
    icon: "zhihu",
    url: "https://www.zhihu.com/search?type=content&q=",
  },
  {
    name: "必应",
    icon: "bing",
    url: "https://www.bing.com/search?q=",
  },
  {
    name: "搜狗",
    icon: "sougou",
    url: "https://www.sogou.com/sogou?query=",
  }
])
const weiboList = ref<any>([])
const baiduList = ref<any>([])
const touTiaoList = ref<any>([])
onBeforeMount(()=>{
  getList()
})

function onSubmit() {
  selectIcon.value = iconList.value[searchRadio.value];
  // 设置用户的搜索引擎
  setCookie("YuanSearchRadio", searchRadio.value, 30);
  dialogVisible.value = false
  message.success('搜索引擎切换成功')
  recorderBehavior({"otherData": selectIcon.value.name, "behavior": "CHANGE_SEARCH_TYPE"}).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      commonConsoleLog("搜索引擎信息上报成功")
    }
  });
}

function onSearch() {
  if (keywords.value.length === 0) {
    message.error("请输入搜索内容");
    return;
  }
  recorderBehavior({
    "otherData": selectIcon.value.name + ": " + keywords.value,
    "behavior": "SUBMIT_OUTSIDE_SEARCH",
  }).then((response: any) => {
    if (response.code == ECode.SUCCESS) {
      commonConsoleLog("搜索信息上报成功")
    }
  })
  window.open(selectIcon.value.url + keywords.value, "_blank");
}

function getList(){
  let weiboParams = new URLSearchParams();
  weiboParams.append("type", "weibo");
  getOutsideHotSearch(weiboParams).then((response:any) => {
    if (response.code == ECode.SUCCESS){
      weiboList.value = response.data
    }
  })

  let baiduParams = new URLSearchParams();
  baiduParams.append("type", "baidu");
  getOutsideHotSearch(baiduParams).then((response:any) => {
    if (response.code === ECode.SUCCESS) {
      baiduList.value = response.data;
    }
  })
  let touTiaoParams = new URLSearchParams();
  touTiaoParams.append("type", "toutiao");
  getOutsideHotSearch(touTiaoParams).then((response:any) => {
    if (response.code === ECode.SUCCESS) {
      touTiaoList.value = response.data;
    }
  })
}
</script>

<template>
  <section class="hotPage">
    <header class="flex h-full justify-center items-center mt-8">
      <a-input v-model:value="keywords" class="w-[800px] h-[50px]" placeholder="请输入搜索内容">
        <template #addonBefore>
          <IconFont class="text-2xl" :type="'icon-'+selectIcon.icon" @click="dialogVisible = true"/>
        </template>
        <template #addonAfter>
          <IconFont class="text-2xl searchButton" type="icon-sousuo" @click="onSearch"/>
        </template>
      </a-input>
    </header>
    <div class="articleListContent flex justify-center w-full mt-16">
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-4 lg:mb-0">
        <HotSectionItem :title="'微博热搜'" :data-list="weiboList"/>
        <HotSectionItem :title="'百度热搜'" :data-list="baiduList"/>
        <HotSectionItem :title="'头条热搜'" :data-list="touTiaoList"/>
      </div>
    </div>
    <!--选择搜索引擎-->
    <a-modal v-model:open="dialogVisible"
             @cancel="dialogVisible = false"
             @ok="onSubmit">
      <template #title>
        <span class="w-full text-2xl flex justify-center items-center">切换搜索引擎</span>
      </template>
      <a-radio-group v-model:value="searchRadio">
        <a-radio-button :value="0">百度</a-radio-button>
        <a-radio-button :value="1">Google</a-radio-button>
        <a-radio-button :value="2">Github</a-radio-button>
        <a-radio-button :value="3">Stack</a-radio-button>
        <a-radio-button :value="4">码云</a-radio-button>
        <a-radio-button :value="5">B站</a-radio-button>
        <a-radio-button :value="6">知乎</a-radio-button>
      </a-radio-group>
    </a-modal>
  </section>
</template>

<style scoped lang="less">
:deep(.ant-input-group) {
  height: 100%;
}

:deep(.ant-input) {
  height: 100%;
}

:deep(.ant-input-group-addon) {
  width: 4rem;
  cursor: pointer;
}

:deep(.ant-input-group-addon):hover .searchButton {
  color: #f43f5e;
}
.articleListContent{
  min-height: calc(100vh - 110px);
}
</style>
